<template>
  <div id="box">
    <div class="header">
      <div class="filter">
        <span class="title" title="名称">名称</span>
        <el-input
          class="item"
          size="small"
          v-model="filters.name"
          placeholder="输入名称"
        ></el-input>
        <span class="clickBtn" style="margin-left: 1%" @click="clickScreen"
          >筛选</span
        >
      </div>
    </div>
    <div class="bottombox">
      <div class="tableList">
        <h1><i></i>所有人员</h1>
        <el-table
          :data="tableData"
          style="width: 100%; font-size: 12px"
          :default-sort="{ prop: 'id', order: 'descending' }"
        >
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="startTime" label="开始时间"> </el-table-column>
          <el-table-column prop="endTime" label="结束时间"> </el-table-column>
          <el-table-column prop="updateTime" label="修改时间"> </el-table-column>
        </el-table>
        <div class="pages" v-show="total * 1 > 10">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSizes"
            layout="total,sizes, prev, pager, next,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div
      class="showLicenseImg"
      v-show="preview.show"
      @click="preview.show = false"
    >
      <img :src="preview.url" />
    </div>
  </div>
</template>

<script>
import { userUseTime} from "@/api";
export default {
  data() {
    return {
      currentPage: 1,
      id:0,
      pageSizes: 10,
      total: 0,
      email:'',
      name:'',
      mobile:'',
      password:'',
      oldPassword:'',
      role:0,
      filters: {
        name: "",
        mobile: "",
        status: -1,
      },
      statusarr:[
        {
          id:-1,
          name:'全部',
        },
        {
          id:1,
          name:'有效',
        },
        {
          id:0,
          name:'无效',
        }
      ],
      tableData: [],
      preview: {
        show: false,
        url: "",
      },
      rolearr:[
        {
          id:1,
          name:'admin'
        },
        {
          id:0,
          name:'普通'
        }
      ],
      reportData: [],
      isshow:false,
      passshow:false
    };
  },
  created() {


    this.getReportqueryData();
  },
  methods: {
    changeswitch(){
        // this.productvalue = !this.productvalue;
        console.log(this.productvalue);
    },
    getReportqueryData(){
      var that = this;
      var parames = {
        page:this.currentPage,
        limit:10,
      }
      if(this.filters.name){
        parames.name = this.filters.name
      }
            userUseTime({
                params:parames
            }).then((res) => {
        if (res.code == 0) {
                     that.tableData = res.data.pageModel.records;
                     that.total = res.data.pageModel.total;
                     console.log(that.tableData);
        }
      });
    },
    isShowdispose(row) {
       this.id =row.id;
       this.name = row.name;
       this.email = row.email;
       this.mobile = row.mobile;
       this.isshow = !this.isshow
    },
    delmember(row){

      var that = this;
      var parames = {
        id:row.id,
      }
            userInforemove({
                params:parames
            }).then((res) => {
        if (res.code == 0) {
          that.getReportqueryData();
        }
      });
    },
    updatepass(row){
      this.passshow = true;
      this.id =row.id;
      this.oldPassword ='';
      this.password ='';
    },
    updpass(){
            var that = this;
            var parames = {
              newPassword:this.password,
              oldPassword:this.oldPassword,
              id:this.id
          }
          parames = window.JSON.stringify(parames);
          updatePassword(parames).then(res=>{
              console.log(res)
              if(res.code == 0){
              that.$message({
              message: "修改成功！",
              type: "success",
            });
            that.passshow = !that.passshow;
            that.getReportqueryData();
              }
          }); 
    },
    isadd(){
      if(!this.id){
        this.addmember();
      }else{
        this.updatemember();
      }
    },
    addmember(){
            var that = this;
            var parames = {
              email:this.email,
              mobile:this.mobile,
              name:this.name,
              password:this.password,
              role:this.role,
          }
          parames = window.JSON.stringify(parames);
          userInfosave(parames).then(res=>{
              console.log(res)
              if(res.code == 0){
              that.$message({
              message: "添加成功！",
              type: "success",
            });
            that.isshow = !that.isshow;
            that.getReportqueryData();
              }
          });
    },
    updatemember(){
            var that = this;
            var parames = {
              email:this.email,
              mobile:this.mobile,
              name:this.name,
              id:this.id
          }
          parames = window.JSON.stringify(parames);
          userInfoupdate(parames).then(res=>{
              console.log(res)
              if(res.code == 0){
              that.$message({
              message: "修改成功！",
              type: "success",
            });
            that.isshow = !that.isshow;
            that.getReportqueryData();
              }
          });
    },
    handleSizeChange(val) {
      this.pageSizes = val;
      this.getReportqueryData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getReportqueryData();
    },
    clickScreen() {
      this.getReportqueryData();
    },
    jumpAdd() {
      this.id = 0;
       this.name = '';
       this.email = '';
       this.mobile = '';
       this.password = '';
       this.role = 0;
      this.isshow =true;
    },
    isClickstart(id, stutas) {
      //修改状态
      var that = this;
      var params = new URLSearchParams();
      params.append("id", id);
      params.append("status", stutas);
      getSaveStatus(params).then((res) => {
        console.log(res);
        if (res.code == 1) {
          that.getAdcreativesearchData();
        }
      });
    },
    formatDates(timeStamp) {
      let time = new Date(timeStamp),
        y = time.getFullYear(),
        m = time.getMonth() + 1,
        d = time.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      return y + "/" + m + "/" + d;
    },
    isPreviews(id) {
      console.log(id);
      this.preview.url = id;
      this.preview.show = true;
    },
    getFormatDate(fmt, date) {
      let ret;
      date = new Date(date);
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
  },
};
</script>

<style scoped>
#box {
  padding: 0 15px;
  display: flex;
  flex-direction: column;
}
#box .header {
  background: #fff;
  padding: 20px 40px;
  margin: 15px 0;
}
#box .bottombox {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  margin-bottom: 15px;
}
#box .filter {
  height: 32px;
  line-height: 32px;
  font-size: 15px;
  margin-bottom: 30px;
}
#box .filter .title {
  margin-right: 0.66%;
  display: inline-block;
  width: 4.34%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
#box .filter .item {
  display: inline-block;
  width: 12%;
  margin-right: 2%;
}
#box .filter .clickBtn {
  display: inline-block;
  width: 6.58%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #455fe7;
  color: #fff;
  border-radius: 4px;
  margin-right: 1.97%;
  cursor: pointer;
}
#box .filter .dateitem {
  width: 13.16%;
  font-size: 12px;
  margin-right: 4.28%;
}
#box .filter .clickBtn {
  display: inline-block;
  width: 100px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #455fe7;
  color: #fff;
  border-radius: 4px;
  margin-right: 30px;
  cursor: pointer;
}
#box .pages {
  padding: 20px 0 10px;
  display: flex;
  justify-content: center;
}
#box .tableList {
  min-height: 300px;
  padding: 0 20px 20px;
}
.preview {
  cursor: pointer;
}
.statustext {
  color: #455fe7;
  font-size: 12px;
}
.statusbtn {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: red;
  -webkit-mask: url("../../assets/play.svg");
  mask: url("../../assets/play.svg");
  mask-size: 100% 100%;
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
}
.pausebtn {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #455fe7;
  -webkit-mask: url("../../assets/pause.svg");
  mask: url("../../assets/pause.svg");
  mask-size: 100% 100%;
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
}
#box .showLicenseImg {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
*/deep/.el-table thead {
  color: #343437 !important;
  font-weight: 200 !important;
  font-size: 15px !important;
}
</style>